<template>
  <div class="providerchannelconfig-detail">
    <a-card title="服务商渠道配置详情" :loading="loading">
      <template #extra>
        <a-space>
          <a-button @click="handleEdit">编辑</a-button>
          <a-button @click="handleBack">返回</a-button>
        </a-space>
      </template>

      <a-descriptions :column="2" bordered>
        <a-descriptions-item label="ID">
          {{ detail.id }}
        </a-descriptions-item>
        <a-descriptions-item label="服务商ID">
          {{ detail.providerId }}
        </a-descriptions-item>
        <a-descriptions-item label="渠道ID">
          {{ detail.channelId }}
        </a-descriptions-item>
        <a-descriptions-item label="环境类型">
          <a-tag :color="detail.isSandbox === 1 ? 'orange' : 'green'">
            {{ detail.isSandbox === 1 ? '沙箱环境' : '生产环境' }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-tag :color="detail.status === 1 ? 'green' : 'red'">
            {{ detail.status === 1 ? '启用' : '禁用' }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="创建时间">
          {{ detail.createdTime }}
        </a-descriptions-item>
        <a-descriptions-item label="更新时间">
          {{ detail.updatedTime }}
        </a-descriptions-item>
      </a-descriptions>

      <a-divider>配置信息</a-divider>

      <a-tabs v-model:activeKey="activeTab">
        <a-tab-pane key="baseConfig" tab="基础配置">
          <div class="config-content">
            <pre>{{ formatJson(detail.baseConfig) }}</pre>
          </div>
        </a-tab-pane>
        <a-tab-pane key="feeConfig" tab="费率配置">
          <div class="config-content">
            <pre>{{ formatJson(detail.feeConfig) }}</pre>
          </div>
        </a-tab-pane>
        <a-tab-pane key="extraConfig" tab="扩展配置">
          <div class="config-content">
            <pre>{{ formatJson(detail.extraConfig) }}</pre>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { useRouter, useRoute } from 'vue-router';
import type { ProviderChannelConfig } from './types';
import { apiProviderChannelConfigFetchDetail } from './api';

const router = useRouter();
const route = useRoute();

const loading = ref(false);
const activeTab = ref('baseConfig');
const detail = reactive<Partial<ProviderChannelConfig>>({});

// 格式化JSON显示
const formatJson = (jsonStr?: string): string => {
  if (!jsonStr) return '{}';
  try {
    return JSON.stringify(JSON.parse(jsonStr), null, 2);
  } catch {
    return jsonStr;
  }
};

// 获取详情数据
const fetchDetail = async () => {
  const id = Number(route.params.id);
  if (!id) {
    message.error('缺少配置ID');
    router.back();
    return;
  }

  loading.value = true;
  try {
    const response = await apiProviderChannelConfigFetchDetail(id);

    if (response.success) {
      Object.assign(detail, response.data);
    } else {
      message.error(response.message || '获取详情失败');
      router.back();
    }
  } catch (error) {
    message.error('获取详情失败');
    console.error('获取详情失败:', error);
    router.back();
  } finally {
    loading.value = false;
  }
};

// 编辑
const handleEdit = () => {
  router.push({
    name: 'ProviderChannelConfigEdit',
    params: { id: detail.id! }
  });
};

// 返回
const handleBack = () => {
  router.back();
};

onMounted(() => {
  fetchDetail();
});
</script>

<style scoped>
.providerchannelconfig-detail {
  padding: 20px;
}

.config-content {
  background: #f5f5f5;
  padding: 16px;
  border-radius: 6px;
  border: 1px solid #d9d9d9;
}

.config-content pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  line-height: 1.5;
}

.ant-card {
  max-width: 1000px;
}
</style>